<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--vue.js核心库-->
    <script src="../js/vue.js"></script>
    <!--引入elementUI-->
    <script src="../element-ui/lib/index.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <!--css-->
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">

    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }

        .el-header {
            background-color: #B3C0D1;
            color: #333;
            line-height: 60px;
        }

        .el-aside {
            color: #333;
            overflow: hidden;
        }

        .el-header {
            background-color: #B3C0D1;
            color: #333;
            height:60px;
        }

        #one {
            display: flex;
            /* 属性为弹性容器内的项目指定默认对齐方式 */
            align-items: center;
            /* 属性垂直对齐项目 */
            justify-content: center;
        }


    </style>
</head>

<body>
<div id="app">

    <el-header
            style="text-align: right; background: linear-gradient(to top right, #39dcce, #39DCCEFF, #FFEB3B); height: 100px">
        <span id="one" style="color:yellow;font-size:45px;font-family:楷体">学生后台管理系统</span>


    </el-header>


    <el-container style="height:600px; border: 1px solid #eee">
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
            <el-menu :default-openeds="['1', '3']">
                <el-submenu index="1">
                    <template slot="title"><i class="el-icon-message"></i>导航一</template>
                    <el-menu-item-group>
                        <template slot="title">分组一</template>
                        <el-menu-item index="1-1">选项1</el-menu-item>
                        <el-menu-item index="1-2">选项2</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="分组2">
                        <el-menu-item index="1-3">选项3</el-menu-item>
                    </el-menu-item-group>
                    <el-submenu index="1-4">
                        <template slot="title">选项4</template>
                        <el-menu-item index="1-4-1">选项4-1</el-menu-item>
                    </el-submenu>
                </el-submenu>
                <el-submenu index="2">
                    <template slot="title"><i class="el-icon-menu"></i>导航二</template>
                    <el-menu-item-group>
                        <template slot="title">分组一</template>
                        <el-menu-item index="2-1">选项1</el-menu-item>
                        <el-menu-item index="2-2">选项2</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="分组2">
                        <el-menu-item index="2-3">选项3</el-menu-item>
                    </el-menu-item-group>
                    <el-submenu index="2-4">
                        <template slot="title">选项4</template>
                        <el-menu-item index="2-4-1">选项4-1</el-menu-item>
                    </el-submenu>
                </el-submenu>
                <el-submenu index="3">
                    <template slot="title"><i class="el-icon-setting"></i>导航三</template>
                    <el-menu-item-group>
                        <template slot="title">分组一</template>
                        <el-menu-item index="3-1">选项1</el-menu-item>
                        <el-menu-item index="3-2">选项2</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="分组2">
                        <el-menu-item index="3-3">选项3</el-menu-item>
                    </el-menu-item-group>
                    <el-submenu index="3-4">
                        <template slot="title">选项4</template>
                        <el-menu-item index="3-4-1">选项4-1</el-menu-item>
                    </el-submenu>
                </el-submenu>
            </el-menu>
        </el-aside>


        <el-main>
            <!--表单-->
            <el-form :inline="true" :model="studentsForm" class="demo-form-inline">
                <el-form-item label="学生名">
                    <el-input v-model="studentsForm.stuName" placeholder="学生名"></el-input>
                </el-form-item>
                <el-form-item label="年级名">
                    <el-select v-model="studentsForm.gradeName" placeholder="年级名">
                        <el-option label="一年级" value="一年级"></el-option>
                        <el-option label="二年级" value="二年级"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="studentsForm.statues" placeholder="状态">
                        <el-option label="禁用" value="0"></el-option>
                        <el-option label="启用" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
            </el-form>
            <!--新增 删除按钮-->
            <el-row>

                <el-button class="el-icon-plus" type="primary" plain @click="dialogFormVisible = true">新增</el-button>
                <el-button type="danger" class="el-icon-delete" plain @click="deleteIds"
                           :disabled="multipleSelection.length === 0"
                >批量删除
                </el-button>
            </el-row>
            <!--表格-->
            <template>
                <el-table
                        :data="tableData"
                        style="width: 100%"
                        :row-class-name="tableRowClassName"
                        @selection-change="handleSelectionChange">

                    <el-table-column
                            type="selection"
                            width="55"
                            align="center">
                    </el-table-column>

                    <el-table-column
                            prop="stuName"
                            label="学生姓名"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="gradeName"
                            label="年级"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="age"
                            label="年龄"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="address"
                            label="地址"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="ordered"
                            label="排序"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="statues"
                            label="状态"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            label="操作"
                            align="center">
                        <el-row slot-scope="scope" width="200px">
                            <el-button size="mini" type="primary" @click="editStudent(scope.row,scope.$index)">编辑
                            </el-button>
                            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                        </el-row>
                    </el-table-column>
                </el-table>
            </template>
            <!--分页-->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="count">
            </el-pagination>

        </el-main>
    </el-container>
    </el-container>

    <!--添加的弹出框-->
    <el-dialog title="新增数据" :visible.sync="dialogFormVisible">
        <el-form :model="studentsForm">

            <el-form-item label="学生姓名" label-width="100px">
                <el-input v-model="studentsForm.stuName" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="年级名称" label-width="100px">
                <el-select v-model="studentsForm.gradeName" placeholder="请选择年级">
                    <el-option label="一年级" value="一年级"></el-option>
                    <el-option label="二年级" value="二年级"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="年龄" label-width="100px">
                <el-input v-model="studentsForm.age" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="地址" label-width="100px">
                <el-input v-model="studentsForm.address" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="排序" label-width="100px">
                <el-input v-model="studentsForm.ordered" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="状态" label-width="100px">
                <el-switch v-model="studentsForm.statues"
                           active-value="1"
                           inactive-value="0"></el-switch>
            </el-form-item>


        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addStudent">确 定</el-button>
        </div>
    </el-dialog>
    <!--编辑数据的弹出框-->
    <el-dialog title="编辑数据" :visible.sync="dialogFormVisibleEdit">
        <el-form :model="studentsEdit">

            <el-form-item label="学生姓名" label-width="100px">
                <el-input v-model="studentsEdit.stuName" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="年级名称" label-width="100px">
                <el-select v-model="studentsEdit.gradeName" placeholder="请选择年级">
                    <el-option label="一年级" value="一年级"></el-option>
                    <el-option label="二年级" value="二年级"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="年龄" label-width="100px">
                <el-input v-model="studentsEdit.age" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="地址" label-width="100px">
                <el-input v-model="studentsEdit.address" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="排序" label-width="100px">
                <el-input v-model="studentsEdit.ordered" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="状态" label-width="100px">
                <el-switch v-model="studentsEdit.statues"
                           active-value="1"
                           inactive-value="0"></el-switch>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisibleEdit=false">取 消</el-button>
            <el-button type="primary" @click="sendEdit">确 定</el-button>
        </div>
    </el-dialog>


    <!--
    current-page 当前页面 点击后发亮
    total 总数据的数量
    size-change 每页的显示的数目发生变化会触发的事件
    current-change 当我们点击了页面后 会触发的事件
    -->

</div>

</body>
</html>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                tableData: [],

                //存储选中的数据信息
                multipleSelection: [],
                //批量删除存储选中的数据信息
                selectedIds: [],
                /*搜索框 属性名和实体一致  方面检索*/
                studentsForm: {
                    stuName: "",
                    gradeName: "",
                    age:"",
                    address: "",
                    ordered: "",
                    statues: ""
                },
                //编辑用户信息
                studentsEdit: {
                    id: '',
                    stuName: '',
                    gradeName: '',
                    age: '',
                    address: '',
                    ordered: '',
                    statues: '1'
                },
                dialogFormVisibleEdit: false,
                //弹出框 开始的状态
                dialogFormVisible: false,

                //准备一堆分页所要私用的数据模型
                currentPage: 1,//当前页
                count: 100,//数据总数
                pageSize: 5//默认显示的每页条数
            }

        },
        methods: {
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
                console.log(this.multipleSelection)

            },
            onSubmit() {
                console.log('表单提交');
                //直接调用分页查询的方法
                this.selectStudentByAll();
                console.log(this.studentsForm)

                axios({
                    method: 'post',
                    url: 'http://localhost:8080/student/selectByPage',
                    data: this.studentsForm
                }).then(resp => {
                    if (resp.data != null) {
                        this.$message({
                            message: '查询成功',
                            type: 'success'
                        });
                        console.log(resp.data)
                        this.tableData = resp.data;
                    }
                }), error => {
                    this.$message.error('没有找到对应条件的学生');
                }
            },

            addStudent() {
                console.log('我调用了添加的方法')
                var _this = this;

                //发送Ajax请求进行添加
                axios({
                    method: 'post',
                    url: 'http://localhost:8080/student/addStudent',
                    data: _this.studentsForm
                }).then(resp => {
                    //判断成功与否
                    if (resp.data == "添加成功") {
                        //关闭弹框
                        this.dialogFormVisible = false;
                        //重新查询全部数据
                        this.selectStudentByAll();
                        //通知是否成功
                        this.$message({
                            message: '恭喜你，新增成功！',
                            type: 'success'
                        });


                    }
                }, error => {
                    this.$message.error('很遗憾，失败了');
                });

            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize = val;
                //改变每页显示的条数之后，数据也要发生变化
                this.selectStudentByAll()
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage = val;
                //数据随之变化
                this.selectStudentByAll()
            },
            //分页查询
            selectStudentByAll() {

                // axios({
                //     methods:"get",
                //     url:"http://localhost:8080/student/selectStudentByAll"
                // }).then(resp =>{
                //     this.tableData = resp.data;
                // })

                //  带分页查询的方法   搜索表单有值 带值查询   无值 查全部

                //console.log('fff')
                axios({
                    method: 'post',
                    url: 'http://localhost:8080/student/selectByPage?currentPage=' + this.currentPage + '&pageSize=' + this.pageSize,
                    data: this.studentsForm
                }).then(resp => {
                    //
                    this.tableData = resp.data.datas;
                    this.count = resp.data.count;
                })
            },
            // 抽取出一个查询全部的方法  方便调用
            //  selectStudentByAll() {
            //      axios({
            //          method: 'get',
            //          url: 'http://localhost:8080/student/selectStudentByAll'
            //      }).then(resp => {
            //          this.tableData = resp.data;
            //      });
            //  },
            // 删除
            handleDelete(row) {
                console.log(row.id);
                axios({
                    method: 'get',
                    url: 'http://localhost:8080/student/delete',
                    params: {
                        id: row.id
                    }
                }).then(resp => {
                    if (resp.data == "删除成功") {

                        //重新查询全部数据
                        this.selectStudentByAll();
                        //通知是否成功
                        this.$message({
                            message: '恭喜你，删除成功！',
                            type: 'success'
                        });


                    }

                });

            },

            //编辑
            editStudent(row, index) {
                //alert(111);

                //console.log(this.studentsEdit)
                this.dialogFormVisibleEdit = true;
                row.statues = row.statues + ""
                this.studentsEdit = JSON.parse(JSON.stringify(row));
            },
            sendEdit() {

                let _this = this;
                // this.studentsEdit = JSON.parse(JSON.stringify(row));
                //console.log(this.studentsEdit);
                axios({
                    method: 'post',
                    url: 'http://localhost:8080/student/editStudent',
                    data: _this.studentsEdit
                }).then(resp => {
                    if (resp.data == "success") {
                        this.$message({
                            message: '修改成功',
                            type: 'success'
                        });
                        this.dialogFormVisibleEdit = false;
                        this.selectStudentByAll();
                    }
                }, error => {
                    this.message.error('修改失败');
                });
            },
            //  批量删除
            deleteIds() {
                //console.log(this.multipleSelection);
                debugger
                if (this.multipleSelection.length != 0) {
                    for (let i = 0; i < this.multipleSelection.length; i++) {
                        let selectedOne = this.multipleSelection[i];
                        this.selectedIds[i] = selectedOne.id;
                    }
                }
                if (this.selectedIds != null) {
                    this.$confirm('此操作将会删除多条数据,是否继续?', '提示', {
                        confirmButtonText: '确认',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        //alert(this.selectedIds)
                        let _this = this;
                        debugger
                        console.log(this.selectedIds)
                        axios({
                            method: 'post',
                            url: 'http://localhost:8080/student/deleteByIds',
                            data: _this.selectedIds
                            // readyData,
                            // params: {
                            //     stuIds:this.selectedIds
                            // }
                        }).then(resp => {
                            if (resp.data == "success") {
                                this.$message({
                                    message: '批量删除成功',
                                    type: 'success'
                                });
                                this.selectStudentByAll();
                            }
                        }, error => {
                            this.message.error('批量删除失败');
                        })
                    })

                }
            }
            ///方法

        },
        //页面加载完毕以后执行的声明周期
        mounted() {
            //当页面加载完成后 发送ajax请求 获取数据

            //调用函数
            this.selectStudentByAll();
        }
    });
</script>